@keyframes rotata360deg {
    from {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

h4{margin:0;padding:0;}
.page_shili{padding-bottom:5em;background:#0b6fd5;}
.td_t{font-size:30px;font-weight:700;color:#FFCC33;text-align:center;margin-top:40px;margin-bottom:0.5em;}
.subtxt {text-align:center;font-size:20px;color:#fff;}
.td_t span{font-weight:700;color:#fff}
.td_nr ul{text-align:center;margin:0;padding:0;overflow:hidden;}
.td_nr li{width:20%;float:left;}
.td_nr li .slbox{width:100%;overflow: hidden;position: relative;height: 0;padding-top: 100%;}
.td_nr li .slbox .slcontent{background: url(../images/td_bg.png) no-repeat center;background-size:100% 100%;position: absolute;top: 0;left: 0;bottom: 0;right: 0;display: block;width: 70%;height: 70%;margin: auto;}
.td_nr li:hover .slbox .slcontent{background: url(../images/td_bgg.png) no-repeat center;background-size:100% 100%;}

.td_nr li .slbox .slcontent em{width:100%;height:65%;display:block;background: url(../images/td_tag_1.png) no-repeat 50% 105%;background-size:auto 70%;}
.td_nr li .slbox .slcontent  p{font-size:1.5em;color:#FFF;margin:0;font-weight:bold;line-height:1.2em;}

.td_nr li:nth-child(1) .slbox .slcontent em{background: url(../images/td_tag_4.png) no-repeat 50% 100%;background-size:auto 70%;}
.td_nr li:nth-child(2) .slbox .slcontent em{background: url(../images/td_tag_2.png) no-repeat 50% 100%;background-size:auto 70%;}
.td_nr li:nth-child(3) .slbox .slcontent em{background: url(../images/td_tag_1.png) no-repeat 50% 100%;background-size:auto 70%;}
.td_nr li:nth-child(4) .slbox .slcontent em{background: url(../images/td_tag_3.png) no-repeat 50% 100%;background-size:auto 70%;}
.td_nr li:nth-child(5) .slbox .slcontent em{background: url(../images/td_tag_5.png) no-repeat 50% 100%;background-size:auto 70%;}

@media only screen and (max-width: 800px) {
.td_nr li{width:33.33%}
.td_nr li:nth-child(1){margin-left:15%;}
.td_nr li:nth-child(2){margin-left:5%}
.td_nr li:nth-child(3){width:33.33%}
.td_nr li:nth-child(4){width:33.33%}
.td_nr li:nth-child(5){width:33.33%}
.td_nr li .slbox .slcontent  p{font-size:1em;color:#FFF;margin:0;font-weight:bold;}
.td_nr li .slbox .slcontent em{height:60%;}
.td_t{font-size:20px;}
.subtxt {text-align:center;font-size:16px;color:#fff;}
}

.td_nr .icon {
position: absolute;top: 0;left: 0;bottom: 0;right: 0;display: block;width: 60%;height: 60%;margin: auto;
    z-index: 1;
    box-sizing: border-box;
    display: block;



}
.td_nr .icon:before {
    content: '';
    display: block;
    position: absolute;

    z-index: -1;
    width: 100%;
    height: 100%;
    background: url(../images/icon-hover-bg.png) no-repeat center;
	background-size:100% 100%;
    opacity: 0;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
}

.td_nr li:hover .icon:before {
    opacity: 1;
    animation: rotata360deg 5s linear infinite;
}